<template>
	<view class="login-box">
		<u-navbar title="爱巧商家" bg-color="#FFF" leftIconSize="0" leftIconColor="#FFF" class="nav-bar"
			titleStyle="font-size:16px;color:#000;font-weight:600">
		</u-navbar>
		<view v-if="show" class="login-content">
			<image class="logo" :src="logo"></image>
			<text class="title">爱巧商家</text>
			<view class="content">
				<u--input placeholder="请输入手机号" :maxlength="11" type="number" :height="40" :focus="false"
					v-model="userInfo.userName" border="none"></u--input>
				<u-input placeholder="请输入密码" :maxlength="50" :height="40" :focus="false" v-model="userInfo.password"
					border="none" type="password" v-if="type === 'password'">
					<template slot="suffix">
						<view @click="showPwd">
							<u-icon color="#999" size="24" name="eye"></u-icon>
						</view>
					</template>
				</u-input>
				<u-input placeholder="请输入密码" :maxlength="50" :height="40" :focus="false" v-else
					v-model="userInfo.password" border="none" type="text">
					<template slot="suffix">
						<view @click="showPwd">
							<u-icon color="#00a8ff" size="24" name="eye"></u-icon>
						</view>
					</template>
				</u-input>
				<view class="option">
					<view class="register" @tap="jumpRegister">注册</view>
					<view class="forget" @click="toPage('3')">忘记密码</view>
				</view>

			</view>
			<view :class="screenWidth < 375 ? 'big btn-box' : 'btn-box'">
				<view>
					<u-checkbox-group size="16" v-model="checked">
						<u-checkbox name="1" inactiveColor="#ccc" activeColor="#00A8FF"></u-checkbox>
					</u-checkbox-group>
				</view>
				<text @click="myFun">勾选即为同意</text>
				<text class="act-color" @click="toPage('1')">《隐私政策》</text>
				<text class="act-color" @click="toPage('2')">《商户服务协议》</text>
			</view>
			<view class="sub">
				<u-button v-if="
            userInfo.userName.trim() &&
            userInfo.password.trim() &&
            checked &&
            checked.length
          " @tap="getSubmit" type="primary" text="登 录" color="#EF684B"></u-button>
				<u-button v-else type="primary" disabled="disabled" color="#EF684B">登 录</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStoreData,
		setStoreData,
		httpPost
	} from "@/utils/http.js";
	const app = getApp();
	const globalData = app.globalData;
	const wxApi = globalData.wxApi;
	const logo = require(`@/img/logo.png`);
	export default {
		data() {
			return {
				show: false,
				isiPhoneX: false,
				screenWidth: 375,
				token: "",
				logo,
				type: "password",
				checked: [],
				userInfo: {
					userName: "",
					password: "",
				},
			};
		},
		onShow() {
			const token = getStoreData("token");
			const phone = getStoreData("phone");
			setStoreData("aboutMe", true);
			const _this = this;
			uni.getSystemInfo({
				success(res) {
					_this.screenWidth = res.screenWidth;
					setStoreData("screenWidth", res.screenWidth);
					setStoreData("screenHeight", res.screenHeight);
					if (res.model.indexOf("iPhone") > -1) {
						const num = res.model.charAt(7);
						if (!isNaN(num) && num >= 4 && num <= 8) {
							_this.isiPhoneX = false;
						} else {
							_this.isiPhoneX = true;
						}
					} else {
						_this.isiPhoneX = false;
					}
					setStoreData("isiPhoneX", _this.isiPhoneX);
				},
			});
			if (token && phone) {
				uni.switchTab({
					url: "home"
				});
			} else {
				this.show = true;
				uni.clearStorage();
			}
		},
		onLoad() {
			// uni.setNavigationBarColor({
			//   frontColor: "#000",
			//   backgroundColor: "#000",
			// });
			console.log('测试')
		},
		methods: {
			showPwd() {
				if (this.type === "password") {
					this.type = "text";
				} else {
					this.type = "password";
				}
			},
			getSubmit() {
				const _this = this;
				const _wx = wx;
				const parmas = {
					userName: this.userInfo.userName.trim(),
					password: this.userInfo.password.trim(),
				};
				httpPost("/api/user/login", parmas)
					.then((res) => {
						_this.token = res.data.id;
						setStoreData("token", "Bearer " + _this.token);
						setStoreData("phone", _this.userInfo.userName.trim());
						uni.switchTab({
							url: "home"
						});
						uni.setStorageSync("userInfo", res.data);
						//#ifdef MP-WEIXIN
						//_this.wxLogin();
						//#endif
					})
					.catch((e) => {});
			},
			wxLogin() {
				// 登录
				wx.login({
					success: res => {
						console.log(res);
						httpPost("/api/user/getOpenId", {
								code: res.code,
								xcxName: 'MH_MALL'
							})
							.then((res) => {
								uni.setStorageSync('openId', res.openId)

							})
							.catch((e) => {});
					}
				})

			},
			toPage(v) {
				if (v === "1") {
					uni.navigateTo({
						url: "/pages/user/agreement",
					});
				} else if (v === "2") {
					uni.navigateTo({
						url: "/pages/user/store-agreement",
					});
				} else if (v === "3") {
					uni.navigateTo({
						url: "/pages/user/update-pwd",
					});
				}
			},
			myFun() {
				if (this.checked && this.checked.length) {
					this.checked = [];
				} else {
					this.checked = ["1"];
				}
			},
			jumpRegister() {
				uni.navigateTo({
					url: '/pages/index/register'
				});
			}
		},
	};
</script>
<style lang="scss">
	@import "./index.scss";
</style>